<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout布局</title>
     <!--引入2 css-->
         <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"/>
         <link rel="stylesheet" href="../themes/icon.css" type="text/css"/>
         <!--引入js文件-->
         <script type="text/javascript" src="../js/jquery.min.js"></script>
         <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>
</div>

<script type="text/javascript">
<!-- 页面加载完成后 自动折叠北边 休息3s后将南边折叠 再将北边张开 -->
    $(function () {
       $("#cc").layout('collapse','north');// 方法名称 collapse

        window.setTimeout(function () {
            $("#cc").layout("collapse","south");
            $("#cc").layout("expand",'north');
        },3000);
    });

</script>
</body>
</html>